<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid #ccc;
            margin: 10px 0;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <button id="btn1">一个按钮</button>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
    <script>

        // 事件绑定

        const btn = document.getElementById('btn1');
        // btn.addEventListener('click', event => {
        //     console.log('clicked');
        // })



        // 通用的事件绑定函数(自己写一个)
        function bindEvent(elem, type, fn) {
            // elem 指为哪个元素绑定事件
            // type 指事件绑定的类型，比如click，keyup
            // fn 指的是事件监听的回调函数
            elem.addEventListener(type, fn)
        }

        bindEvent(btn1, 'click', event => {
            event.preventDefault(); // 阻止默认行为 比如阻止默认跳转
            alert('clicked');
        });


        // 事件冒泡
        const body = document.body;
        bindEvent(body, 'click', event => {
            console.log('bodyclicked');
            // console.log(event.target); // 获取谁触发了这个点击事件

            // 测试完之后发现。每点击一个事件都会冒泡到body上去，触发 bodyclicked
        })

        const div2 = document.querySelector('#div2');
        bindEvent(div2, 'click', event => {
            console.log('div2clicked');
            console.log(event.target); // 获取谁触发了这个点击事件


            // 发现首先弹出div2clicked，后弹出bodyclicked。证明了冒泡的顺序顺着DOM结构往上冒
        })


        const p1 = document.querySelector('#p1');
        bindEvent(p1, 'click', event => {
            event.stopPropagation(); // 阻止冒泡
            // 只会触发激活不会触发bodyclicked
            console.log('激活');
        })
    </script>
</body>

</html>